<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
</head>
<body>

<div id="app">

    <h2 align="center">用户列表</h2>

    <br>
    <div style="text-align: center">
        <!--        <el-link href="/index" type="primary" :underline="false"><h3>首页</h3></el-link>-->
    </div>
    <br>

    <el-table
            :data="userList"
            style="width: 100%" v-loading="loading">
        <el-table-column
                prop="id"
                label="编号"
                width="200" align="center">
        </el-table-column>
        <el-table-column
                prop="uuid"
                label="会话编号"
                width="200" show-overflow-tooltip="true" align="center">
        </el-table-column>
        <el-table-column
                prop="username"
                label="账号"
                width="200" align="center">
        </el-table-column>
        <el-table-column
                prop="updateTime"
                label="登录时间"
                width="200" align="center">

            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.updateTime }}</span>
            </template>

        </el-table-column>
        <el-table-column
                prop="isLogin"
                label="状态"
                align="center">
            <template slot-scope="scope">
                <el-tag :type="scope.row.isLogin==1?'warning':'danger'"
                        v-html="scope.row.isLogin==1?'在线':'不在线'"></el-tag>
            </template>
        </el-table-column>

        <el-table-column
                fixed="right"
                label="操作"
                align="center">
            <template slot-scope="scope">
                <!--                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>-->
                <!--                <el-button type="text" size="small">编辑</el-button>-->
                <button v-if="scope.row.isLogin==1" @click="logoutByLoginId(scope.row.uuid)" type="button">踢下线</button>
                <button v-if="scope.row.state==0" @click="disable(scope.row.uuid,scope.row.state)" type="button">账号封禁
                </button>
                <button v-if="scope.row.state==1" @click="disable(scope.row.uuid,scope.row.state)" type="button">账号解封
                </button>
                <button type="button" @click="findPermissionByUserUUid(scope.row.uuid)">修改账号权限</button>
            </template>
        </el-table-column>
    </el-table>

    <div style="text-align: center;padding-top: 20px" v-if="isShow">
        <h4>权限列表</h4>
        <el-checkbox-group v-model="checkedPermissions" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="permission in permissionList" :label="permission.id" :key="permission.id"><span
                    v-html="permission.permissionName"></span></el-checkbox>
        </el-checkbox-group>
        <div style="padding-top: 20px">
            <el-button type="primary" @click="isShow=!isShow">收起</el-button>
        </div>

    </div>
</div>

<script th:src="@{/axios.min.js}"></script>
<script th:src="@{/vue.js}"></script>

<!-- 引入样式 -->
<link rel="stylesheet" th:href="@{/element-ui.css}">
<!-- 引入组件库 -->
<script th:src="@{/element-ui.js}"></script>

<script>
    new Vue({
        el: "#app",
        data: {
            userList: [],
            loading: true,
            checkedPermissions: [],
            isShow: false,  //显示权限列表
            permissionList: [],   //账号权限
            uuid: "",
            loading: false
        },
        methods: {
            handleCheckedCitiesChange(val) {
                this.loading=true
                axios.put("/permission/editPermissionByUUid/" + val + "/" + this.uuid).then(resp => {
                    if (resp.data.flag) {
                        this.findPermissionByUserUUid(this.uuid)
                        this.loading=false
                        this.loading=false
                        this.$message({
                            message: resp.data.message,
                            type: 'success'
                        });
                    } else {
                        this.loading=false
                        this.$message.error(resp.data.message);
                    }
                })
            },

            findPermissionByUserUUid(uuid) {
                this.uuid = uuid
                axios.get("/permission/findPermissionUserUUid/" + uuid).then(resp => {
                    if (resp.data.flag) {
                        this.checkedPermissions = resp.data.data
                    } else {
                        this.$message.error(resp.data.message);
                    }
                })
                this.isShow = true
            },

            findPermission() {
                axios.get("/permission/findPermission").then(resp => {
                    if (resp.data.flag) {
                        this.permissionList = resp.data.data
                    } else {
                        this.$message.error(resp.data.message);
                    }
                    this.loading = false
                })
            },

            disable(uuid, state) {
                this.loading=true
                axios.post("/user/disable/" + uuid + "/" + state).then(resp => {
                    if (resp.data.flag) {
                        this.loading=false
                        this.$message({
                            message: resp.data.message,
                            type: 'success'
                        });
                        this.findAll()
                    } else {
                        this.loading=false
                        this.$message.error(resp.data.message);
                    }
                })
            },

            findAll() {
                this.loading=true
                axios.get("/user/findAll").then(resp => {

                    if (resp.data.flag) {
                        this.userList = resp.data.data
                        this.loading=false
                    } else {
                        this.$message.error(resp.data.message);
                    }

                })
            },

            logoutByLoginId(uuid) {
                this.loading = true
                axios.get("/user/logoutByLoginId/" + uuid).then(resp => {
                    if (resp.data.flag) {
                        this.loading = false
                        this.$message({
                            message: resp.data.message,
                            type: 'success'
                        });
                        this.findAll()
                    } else {
                        this.loading = false
                        this.$message.error(resp.data.message);
                    }
                })
            }
        },
        created() {
            this.findAll()
            this.findPermission()
        }
    })
</script>
</body>
</html>